<template>
    <div class="markerStyle" ref="markerDom" name="markerDom" v-if="!markerSelect">
        <div class="markerStyle-bg" name="markerDom">
            <div class="markerStyle-circle" name="markerDom" :style="{ backgroundColor: markerStyle.backgroundColor }">
            </div>
            <div class="markerStyle-rect" name="markerDom" :style="{ backgroundColor: markerStyle.backgroundColor }">
            </div>
        </div>
        <div class="markerStyle-icon" name="markerDom" :style="{ color: markerStyle.textColor,width:columnData.mapOptions.innerType == 'field'?'100%':'' }">
            <i :class="columnData.markerStyle.icon" name="markerDom" v-if='columnData.mapOptions.innerType != "field"'></i>
            <span v-else name="markerDom" >{{ text}}</span>
        </div>
    </div>
    <div class="markerStyle" ref="markerDomSelect" name="markerDomSelect" v-else>
        <div class="markerStyle-bg" name="markerDomSelect">
            <div class="markerStyle-circle" :style="{ backgroundColor: markerStyle.backgroundColorSelect }"
                name="markerDomSelect"></div>
            <div class="markerStyle-rect" :style="{ backgroundColor: markerStyle.backgroundColorSelect }"
                name="markerDomSelect"></div>
        </div>
        <div class="markerStyle-icon" :style="{ color: markerStyle.textColorSelect }" name="markerDomSelect">
            <i :class="markerStyle.icon" name="markerDomSelect"></i>
        </div>
    </div>
</template>
<script>

export default {
    props: {
        text: {
            type: String,
            default:''
        },
        markerSelect: false,
        columnData: {
            type: Object,
            default: {}
        },
        markerStyle: {
            type: Object,
            default: () => {
                return {
                    backgroundColor: '#fff',
                    textColor: '#333',
                    backgroundColorSelect: '#1890ff',
                    textColorSelect: '#fff',
                    icon: ''
                }
            }
        }
    },
    data() {
        return {
        }
    },
    mounted() {
       
    },
}
</script>
